<template>
	<view :class="['container',{'dark':theme=='dark'}]">
		<view class="conta">
			<view :class="['maia','funs',{'darksss':theme=='dark'}]">
			
					<u-form :model="form" ref="uForm">
						
						<u-form-item label="姓名" prop="name">
							<u-input v-model="form.name" />
						</u-form-item>
						<u-line color="#5559691f"></u-line>
						
						<u-form-item label="号码" prop="intro">
							<u-input v-model="form.intro" />
						</u-form-item>
						<u-line color="#5559691f"></u-line>
						
					</u-form>
			</view>
			<u-gap height="80" bg-color=""></u-gap>
			
			<!-- 上传护照头像正面 -->
			<view class="maxi">
				<!-- 最大上传图片大小 2M 尺寸最大 1024 X 1024 最大上传数量 6张 -->
				<u-upload :max-size="2 * 1024 * 1024" max-count="6"></u-upload>	
				
				<u-gap height="80" bg-color=""></u-gap>
				
				<u-button type="primary">提 交</u-button>
				
			</view>
			
		</view>
	</view>
</template>

<script>
	
	import {mapState,mapActions,mapGetters} from 'vuex';
	import uniPopup from '@/components/uni-popup2.vue';
	import {commonNewsList,commonCarousel,huobiTicket,info,logout} from '../../common/apiString.js'
	import {myMixins} from '@/common/myMixins.js'//加入全局下拉刷新
	export default{
		mixins:[myMixins],
			components: {
				uniPopup
			},
			data() {
				return {
					action: 'http://www.example.com/upload',
					form: {
						name: '',
						intro: '',
						
					},
					rules: {
						name: [
							{ 
								required: true, 
								message: '请输入护照姓名', 
								trigger: ['change','blur'],
							}
						],
						intro: [
							{
								min: 10, 
								message: '请输入护照号码', 
								trigger: 'change'
							}
						]
					}
				};
			},
			computed:{
				...mapState({
				  theme:state=>state.theme
				}),
			},
			onLoad() {
				uni.setNavigationBarTitle({
					title:this.$t('login').passport
				})
				this.$utils.setTheme(this.theme);
				this.getHtml()
			},
			methods: {
				//路由开始
				submit() {
						this.$refs.uForm.validate(valid => {
							if (valid) {
								console.log('验证通过');
							} else {
								console.log('验证失败');
							}
						});
					},
				submit() {
						this.$refs.uUpload.upload();
						let files = [];
						// 通过filter，筛选出上传进度为100的文件(因为某些上传失败的文件，进度值不为100，这个是可选的操作)
						files = this.$refs.uUpload.lists.filter(val => {
							return val.progress == 100;
						})
						// 如果您不需要进行太多的处理，直接如下即可
						// files = this.$refs.uUpload.lists;
				console.log(files)
					},
					
				funsItemClick(index){
					if(index==1){
						uni.navigateTo({
							url:'/'
						})
					};
					
				},
				//路由结束
			},
			onReady() {
					this.$refs.uForm.setRules(this.rules);
			}
		}
</script>

<style lang="scss">
	page {
		background: #f7f7f7;
	}
.container {
	    padding: 2vw;
		    width: 100%;
		    height: 100%;
		.u-list-item {
		    width: 100px;
		    height: 100px;
		    overflow: hidden;
		    margin: 5px;
		    background: #eceef5;
		    position: relative;
		    border-radius: 5px;
		    display: flex;
		    align-items: center;
		    justify-content: center;
		}
		.u-form-item {
		    display: flex;
		    flex-direction: row;
		    padding: 10px 0;
		    font-size: 14px;
		    color: #9E9E9E;
		    box-sizing: border-box;
		    line-height: 35px;
		    flex-direction: column;
		}
		.u-border-bottom:after, .u-border-left:after, .u-border-right:after, .u-border-top-bottom:after, .u-border-top:after, .u-border:after {
		    content: ' ';
		    position: absolute;
		    left: 0;
		    top: 0;
		    pointer-events: none;
		    box-sizing: border-box;
		    -webkit-transform-origin: 0 0;
		    transform-origin: 0 0;
		    width: 199.8%;
		    height: 199.7%;
		    -webkit-transform: scale(0.5, 0.5);
		    transform: scale(0.5, 0.5);
		    border: 0 solid #e4e7ed !important;
		    z-index: 2;
		}
	.conta {
		
		.maia {
			padding: 2vw;
		
		}
		
		
		
		
		
		
	}
	.slot-btn {
		width: 329rpx;
		height: 140rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: rgb(244, 245, 246);
		border-radius: 10rpx;
	}
	
	.slot-btn__hover {
		background-color: rgb(235, 236, 238);
	}
	
	
	
	
	
	
	
}
</style>
